<template>
  <div>
    <a-list :grid="{ gutter: 10, column: 4 }" :loading="isLoading" :data-source="data" :pagination="pagination">
      <a-list-item slot="renderItem" slot-scope="item, index" class="column-space">
        <div class="list-item">
          <a-list-item-meta>
            <div slot="title" class="header">
              <div>
                <img :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+item.resourceImage" alt="vedio" class="image">
                <img src="../../assets/hot.png" class="hot-img">
              </div>
              <div class="item-title">
                <template v-if="item.isCollected">
                  <div class="title-text" :title="item.resourceName">{{ item.resourceName }}</div>
                  <div class="flex collect" @click="cancelCollect(item)">
                    <a-icon type="star" theme="filled" :style="{color: '#1bcbb4'}" class="icon-star"/>
                    <span class="collect-text" :style="{color: '#1bcbb4'}">收藏</span>
                  </div>
                </template>
                <template v-else>
                  <div class="title-text title-width" :title="item.resourceName">{{ item.resourceName }}</div>
                  <div class="flex collect" @click="collect(item)">
                    <a-icon type="star" class="icon-star"/>
                    <span class="collect-text">收藏</span>
                  </div>
                </template>
              </div>
            </div>
          </a-list-item-meta>
          <div class="decoration">
            <div>
              <p class="detail-style">{{item.resourceDesc}}</p>
            </div>
            <div class="public-time">
              <span>{{item.resourceTime}}</span>
              <a :download="item.resourceName" :href="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+item.resourceUrl">
                <span class="download">下载</span>
              </a>
            </div>
          </div>
          <div class="flex item-footer">
            <div class="footer-presenter">
              <span>发布人：</span>
              <span>{{item.resourceUserName}}</span>
            </div>
            <div>
              <template v-if="item.isFollowed">
                <div @click="cancelFollowed(item)">
                  <span><a-icon type="heart" theme="filled" style="color: #fa3d3d"/></span>
                  <span class="cursor-hover" style="color: #fa3d3d">关注</span>
                </div>
              </template>
              <template v-else>
                <div @click="follow(item)">
                  <span><a-icon type="heart"/></span>
                  <span class="cursor-hover">关注</span>
                </div>
              </template>
            </div>
          </div>
        </div>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import {getCatList,collectResource,cancelCollectResource, cancelFollowResource, followResource} from "../../api";
const data = [];

export default {
  name: "CourseEvaluation.vue",
  data(){
    return{
      data,
      isLoading: true,
      pagination: {
        total: 0,
        defaultPageSize: 20,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onChange:(page,pageSize)=>this.getList(page,pageSize),//点击页码事件
      },
      userName : window.localStorage.getItem('userName'),
    }
  },
  created() {
    //列表查询
    this.getList()
  },
  methods: {
    // 点击下载文件
    // downloadFile(item) {
    //   let file = 'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+item.resourceUrl
    //   this.download(file, item.resourceName);
    // },
    // download (src, fileName) {
    //   let x = new XMLHttpRequest();
    //   x.open("GET", src, true);
    //   x.responseType = 'blob';
    //   x.onload = function(e) {
    //     let url = window.URL.createObjectURL(x.response)
    //     let a = document.createElement('a');
    //     a.href = url
    //     a.download = fileName
    //     a.click()
    //   }
    //   x.send();
    // },
    getList(pageNum=1, pageSize=20) {
      this.userName = window.localStorage.getItem('userName')
      this.isLoading = true
      this.pageNum = pageNum
      let params = {
        pageNum: pageNum,
        pageSize: pageSize,
        categoryId: 1,
        userName : this.userName
      }
      getCatList(params)
        .then((res) => {
          if (res.status == 200){
            console.log('get', res)
            this.data = res.data.list
            this.pagination.total = res.data.total
            this.isLoading = false
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    //收藏资源
    collect(item) {
      let params = {
        resourceId: item.resourceId,
        userName: window.localStorage.getItem('userName')
      }
      collectResource(params)
        .then((res) => {
          if (res.status == 200){
            this.$message.success('收藏成功！')
            this.getList()
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    //取消收藏
    cancelCollect(item) {
      let params = {
        resourceId: item.resourceId,
        userName: window.localStorage.getItem('userName')
      }
      cancelCollectResource(params)
        .then((res) => {
          if (res.status == 200){
            this.$message.success('取消收藏成功！')
            this.getList()
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    //关注粉丝
    follow(item) {
      let params = {
        followUserName: window.localStorage.getItem('userName'),
        followedUserName: item.resourceUserName
      }
      followResource(params)
        .then((res) => {
          if (res.status == 200){
            this.$message.success('关注成功！')
            this.getList()
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    //取消关注粉丝
    cancelFollowed(item) {
      let params = {
        followUserName: window.localStorage.getItem('userName'),
        followedUserName: item.resourceUserName
      }
      cancelFollowResource(params)
          .then((res) => {
            if (res.status == 200){
              this.$message.success('取消关注成功！')
              this.getList()
            }
            else{
              this.$message.info(res.msg)
            }
          })
    }
  }
}
</script>


<style scoped>
  .flex{
    display: flex;
    flex-direction: row;
  }
  .header{
    justify-content: space-between;
    align-items: center;
  }
  .column-space{
    margin-top: 12px;
  }
  .list-item{
    border-radius: 4px;
    border: solid 2px #eeeeee;
    padding: 5px;
    cursor: pointer;
    background-color: #ffffff;
  }
  .list-item:hover{
    border: solid 2px #1bcbb4;
    box-shadow: 2px 2px 20px #dddddd;
  }
  .decoration{
    font-size: 12px;
    color: #666666;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
  }
  .footer-presenter{
    color: #222222;
    font-weight: 600;
  }
  .hot-img{
    position: absolute;
    top: 0px;
    left: 6px;
  }
  .item-title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 5px;
  }
  .title-text{
    font-size: 15px;
    font-weight: 600;
    color: #222222;
    width: 149px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .collect{
    align-items: center;
    cursor: pointer;
  }
  .collect-text{
    font-family: MicrosoftYaHei;
    font-size: 11px;
    color: #666666;
    margin-left: 3px;
  }
  .collect-text:hover {
    color: #1bcbb4;
  }
  .item-footer{
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #666666;
    border-top: 1px dashed #eaeaea;
    justify-content: space-between;
    padding: 5px;
  }
  .public-time{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .image{
    width: 100%;
    height: 128px;
  }
  .icon-star{
    font-size: 13px;
  }
  .detail-style {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;/*想省略几行就写几*/
    -webkit-box-orient: vertical;
    text-indent: 2em;
    height: 50px;
  }
  .cursor-hover:hover {
    color: #1bcbb4;
  }
  .download {
    color: #f91a44;
  }
  .download:hover {
    color: #f65675;
  }
  .title-width{
    width: 170px;
  }

</style>
